
/**
 * Ext.ux.HeaderToolbarButton
 * Customised Button for use in a HeaderPanel.
 * @extends Ext.Button
 */
Ext.ux.HeaderToolbarButton = function(config) {
	var config = config || {};

	Ext.ux.HeaderToolbarButton.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.HeaderToolbarButton, Ext.Button, {
			template	: new Ext.Template('<div>',
					'<div class="x-btn-icon {icon} {iconPos}"></div>',
					'<div class="x-btn-text">', '{name}', '</div>', '</div>'
			),

			/**
			 * Override the default onRender method to update the styling of
			 * the button and also to add icon functionality.
			 */
			onRender	: function(ct, position) {
				// check if icon position is specified
				if (this.iconCls) {
					if (!this.iconPos) {
						this.iconPos = 'top';
					};
				};

				var btn, data = {
					name	: this.text,
					icon	: '' || this.iconCls,
					iconPos	: '' || this.iconPos
				};

				btn = this.template.append(ct, data, true);
				btn.unselectable();

				var btnEl = btn.child('div');

				this.initButtonEl(btn, btnEl);

				Ext.ButtonToggleMgr.register(this);
			},

			/**
			 * Sets this button's text. Overrides superclass method to be compatible with our button template.
			 * @param {String} text The button text
			 */
			setText		: function(text) {
				this.text = text;
				if (this.el) {
					this.el.child(".x-btn-text").update(text);
				}
				this.autoWidth();
			}
		});
Ext.reg('header_toolbar_button', Ext.ux.HeaderToolbarButton);
